HTML Full Course [Day 11] [Hindi] 💻 | Forms (Part 3) - File Upload and Pattern 🚀 | Mohit Decodes

HTML Tutorial – Part 11: Forms (Part 3) — File Upload and Pattern Validation

Welcome to Day 11 of the HTML Full Course [Hindi] by Mohit Decodes! Today’s lesson focuses on two important form features: file upload inputs and pattern validation using regular expressions.

🔹 File Upload (<input type="file">)

The file input allows users to upload files from their device.

Basic Example:

html
CopyEdit
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="fileUpload">Upload your resume:</label>
<input type="file" id="fileUpload" name="resume" accept=".pdf,.doc,.docx" required>
<button type="submit">Submit</button>
</form>
  1. accept attribute restricts allowed file types.
  2. Use enctype="multipart/form-data" in the form to enable file uploads.

🔹 Pattern Validation (pattern Attribute)

The pattern attribute lets you specify a regular expression to validate input format on the client side.

Example: Validating a phone number (10 digits)

html
CopyEdit
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" pattern="\d{10}" title="Enter 10 digit phone number" required>
  1. The pattern \d{10} means exactly 10 digits.
  2. title attribute shows a message if validation fails.

💡 Additional Tips:

  1. Use required to make fields mandatory.
  2. Combine pattern with other input types like email or text.
  3. Always provide helpful title messages for better UX.